<!-- 
 @Author: LW   
 @Date: 2020-12-10 09:05:28   
 @function:界面顶部主键【个人资料和密码修改待指定人做】  
 -->
<template>
  <div class="topnav">
    <el-button
      class="changemenu"
      :class="isCollapse ? '' : 'showmenubtn'"
      :icon="
        isCollapse ? 'iconfont iconshujuliebiao' : 'iconfont iconshuliebiao'
      "
      @click="handMenuState()"
    ></el-button>
    <span class="head_logo">综合管理平台</span>
    <el-menu
      :default-active="activeIndex"
      class="el-menu"
      mode="horizontal"
      @select="handleSelect"
      text-color="#FAFBFD"
    >
      <el-menu-item :index="item.id" :key="item.id" v-for="item in menuList">
        <i class="iconfont" :class="item.icon_font"></i>
        <span slot="title">{{ item.name }}</span>
      </el-menu-item>
    </el-menu>

    <el-dropdown class="user">
      <span class="userinfo">
        <img :src="userInfo.pictureurl" class="userpic" />
        {{userInfo.realname}}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item>
          <div @click="Canpersonal()">个人资料</div>
        </el-dropdown-item>
        <el-dropdown-item>
          <div @click="changePassword()">修改密码</div>
        </el-dropdown-item>
        <el-dropdown-item>
          <div @click="logOut()">退出</div>
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <el-dialog
      :title="editForm.formTitle"
      :visible.sync="editForm.formVisible"
      v-if="editForm.formVisible"
      :width="editForm.width"
      v-dialogDrag
      custom-class="role-mask"
      :close-on-click-modal="false"
    >
      <component v-bind:is="curComponent" @callBack="callBack"></component>
    </el-dialog>
  </div>
</template>
<script>
//引用home界面相关的api[顶部导航/个人信息放在里面，如果不再拆分，个人信息/密码修改也放里面]
import PasswordForm from "./password";
import PersonalForm from "./personal";

import HomeHttp from "@/api/home/index";
const { loadMenuList, loadTopMenu } = HomeHttp;

import DynamicRoutes from "@/utils/dynamicRoutes";
const { mergeRoutes } = DynamicRoutes;

export default {
  props: ["isCollapse"], //是否展开
  //注册组件
  components: {
    PasswordForm,
    PersonalForm
  },
  data() {
    return {
      activeIndex: "",
      menuList: null, //菜单信息
      curComponent: null,
      editForm: {
        formVisible: false, //窗体是否显示
        formTitle: "", //窗体标题
        width: ""
      },
      userInfo: {
        pictureurl: require("@/assets/images/userpic.jpg")
      }
    };
  },
  computed: {},
  //html加载完成之前，执行。执行顺序：父组件-子组件
  created() {},
  //html加载完成后执行。执行顺序：子组件-父组件
  //页面初始化方法
  mounted() {
    this.initData();
  },
  methods: {
    //初始化操作
    initData() {
      this.userInfo = this.$store.getters.userInfo;
      this.userInfo.pictureurl =
        this.$store.getters.fileServerURI + this.userInfo.picture_url;
      //获取一级菜单
      this.loadTopMenu();
    },
    //修改密码弹窗
    changePassword() {
      this.curComponent = PasswordForm;
      this.editForm.formVisible = true;
      this.editForm.formTitle = "修改密码";
      this.editForm.width = "30%";
    },
    //个人资料弹窗
    Canpersonal() {
      this.curComponent = PersonalForm;
      this.editForm.formVisible = true;
      this.editForm.formTitle = "个人资料";
      this.editForm.width = "50%";
    },
    callBack() {
      this.editForm.formVisible = false;
    },
    //获取顶级菜单
    loadTopMenu() {
      let par = {
        appSecret: this.$store.getters.appSecret
      };
      loadTopMenu(par).then(response => {
        let data = response.data;
        if (data.Code === 1000) {
          //本地化处理好的菜单列表
          this.menuList = data.Data;
          this.activeIndex = data.Data[0].id;
          let json = {
            type: "menu",
            data: data.Data[0].id
          };
          this.$emit("callBack", json);
        } else {
          this.$messageTip.warning(data.Msg); 
        }
      });
    },
    //展开折叠菜单
    handMenuState() {
      let json = {
        type: "fold",
        data: this.isCollapse
      };
      this.$emit("callBack", json);
    },
    //二级菜单添加
    handleSelect(key, keyPath) {
      this.activeIndex = key;
      let json = {
        type: "menu",
        data: key
      };
      this.$emit("callBack", json);
    },
    //登出
    logOut() {
      this.$router.push({ path: "/" });
    }
  }
};
</script>

 <style lang="scss" scoped>
@import "../../../assets/css/home/components/header.scss";
</style>
<style>
@import "../../../assets/css/home/components/header.cover.scss";
</style>